<template>
	<view>
		<!-- 逻辑层 -->
		<view :msg="valueChangeSign" :change:msg="myMapViews.valueChange" type="default"></view>

		<!-- 视图层 - 地图 -->
		<template>
			<view style="width: 350px;height: 600px;" id="myMapView" />
		</template>
	</view>
</template>

<!-- 逻辑层代码 -->
<script>
	export default {
		data() {
			return {
				valueChangeSign: "", // 调用视图层方法的信号
			}
		},
		methods: {
			/**
			 *  给renderJS调用的方法
			 */
			methodForRenderJs: function(val) {
				console.log("我是逻辑层，被视图层调用了，并且收到参数：");
				console.log(val);
			},
		},
		onShow() {
			let this_ = this;
			setInterval(function() {
				var map = new Map();
				map["name"] = "逻辑层";
				map["value"] = "传递值";
				this_.valueChangeSign = [new Date().getTime(), map];
			}, 5000);
		}
	}
</script>

<!-- RenderJS视图层代码 -->
<script module="myMapViews" lang="renderjs">
	import {
		loadModules
	} from 'esri-loader'
	export default {
		name: 'myMapView',
		data() {
			return {
				myMapObject: {}, // 对象，存储关于地图的图层、方法、属性等
			}
		},
		methods: {
			createMapView() {
				var this_ = this;
				return new Promise(function(resolve) {
					const options = {
						url: 'https://js.arcgis.com/4.14/init.js',
						css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
					};
					loadModules([
						"esri/Map",
						"esri/views/MapView",
						"esri/Basemap",
						"esri/layers/Layer",
						"esri/layers/TileLayer",
					], options).then(([Map, MapView, Basemap, Layer, TileLayer]) => {

						// 地图的底图
						var url =
							"http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer";
						var basemaplayer = new TileLayer({
							url: url,
							visible: true,
						});

						// 地图对象
						var map = new Map({
							basemap: "", // 底图置空
							layers: [basemaplayer], // 添加自定义的layer为底图
						});

						// 创建一个mapView并绑定页面元素
						var view = new MapView({
							container: "myMapView",
							map: map,
							zoom: 1, // 缩放比例 值越大图越大
						});

						// 地图加载完成事件
						view.when(function() {
							console.log("地图加载完成了！");
							resolve();
						});

						// 定义myMapObject的方法供外部调用
						this_.myMapObject.methodForOutSide = function(val) {
							console.log("methodForOutSide方法被调用了：" + val);
						}

						this_.myMapObject.map = map;
					})
				})
			},
			valueChange(newVal, oldVal, ownerVm, vm) {
				console.log("我是视图层，我被逻辑层调用了...");
				// console.log("我是新数据....");
				// console.log(newVal);
				// console.log("我是旧数据....");
				// console.log(oldVal);
				// var map = newVal[1];
			},
		},
		mounted() {
			// 页面初始化完成后
			var this_ = this;
			this.createMapView().then(function() {
				console.log("加载地图的promise执行结束了....")
				// 打印地图对象
				console.log(this_.myMapObject.map);
				// 调用createMapView()内部的方法
				this_.myMapObject.methodForOutSide();
				// renderJs主动调用逻辑层的方法
				this_.$ownerInstance.callMethod('methodForRenderJs', {
					val1: "参数1",
					val2: "参数2"
				});
			});
		},
	}
</script>

<style>
	/deep/.esri-widget--button {
		display: none;
	}

	/deep/.esri-attribution__powered-by {
		display: none;
	}

	/deep/.esri-view .esri-view-surface--inset-outline:focus::after {
		outline: none;
	}
</style>